<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="css/global.css">
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="./images/icon.png">
    <title>耐思书店首页</title>
</head>

<body>
    <div id="header">
        <iframe src="header.html" height="45px" width="100%" frameborder="0" scrolling="no"></iframe>
    </div>

    <div class="container">
        <!-- 二级菜单 -->
        <div class="daohang2">
            <ul class="dhmiddle">
                <li><img src="./images/logo-0.png" alt=" " class="logo"></li>
                <!-- <li id="caidan"><span>全部商品分类</span>
                    <ul id="subcaidan">
                        <li><span>文学艺术</span>
                            <ul class="subsubcaidan">
                                <li class="subsub">小说</li>
                                <li class="subsub">文学</li>
                                <li class="subsub">艺术</li>
                                <li class="subsub">传记</li>
                            </ul>
                        </li>
                        <li><span>人文社科</span>
                            <ul class="subsubcaidan">
                                <li class="subsub">历史</li>
                                <li class="subsub">哲学宗教</li>
                                <li class="subsub">心理</li>
                            </ul>
                        </li>
                        <li><span>少儿童书</span>
                            <ul class="subsubcaidan">
                                <li class="subsub">儿童文学</li>
                                <li class="subsub">启蒙益智</li>
                            </ul>
                        </li>
                        <li><span>教育考试</span>
                            <ul class="subsubcaidan">
                                <li class="subsub">中小教辅</li>
                                <li class="subsub">外语学习</li>
                            </ul>
                        </li>
                    </ul>
                </li> -->
                <li class="sousuokuang">
                    <form action="">
                        <input type="text" id="txt" placeholder="请输入你要搜索的图书">
                    </form>
                    <input type="button" value="搜索" id="search">
                </li>
            </ul>
            
        </div>
        


        <!-- 轮播 -->
        <div id="carouselExampleIndicators" class="carousel slide loopP" data-bs-ride="carousel">
            <!-- 二级菜单 -->
        <div class="menu">
            <div class="menuTitle">全部商品分类</div>
            <ul class="menuList">
                <li>
                    <div class="menuListTil">
                        <div class="menuSanjiao">
                            <p>文学艺术</p>
                        </div>
                        <div class="menuListDis">
                            <ul>
                                <li>
                                    <span class="classifyName">小说</span>
                                    <span><a href="">中国小说</a></span>
                                    <span><a href="">外国小说</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">文学</span>
                                    <span><a href="">中国文学</a></span>
                                    <span><a href="">外国文学</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">艺术</span>
                                    <span><a href="">书法</a></span>
                                    <span><a href="">摄影</a></span>
                                    <span><a href="">舞蹈</a></span>
                                    <span><a href="">音乐</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">传记</span>
                                    <span><a href="">传记</a></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="menuListTil">
                        <div class="menuSanjiao">
                            <p>人文社科</p>
                        </div>
                        <div class="menuListDis">
                            <ul>
                                <li>
                                    <span class="classifyName">历史</span>
                                    <span><a href="">世界史</a></span>
                                    <span><a href="">中国史</a></span>
                                    <span><a href="">史学理论</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">法律</span>
                                    <span><a href="">法律法规</a></span>
                                    <span><a href="">法学理论</a></span>
                                    <span><a href="">法律科普</a></span>
                                    <span><a href="">中国法律</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">心理</span>
                                    <span><a href="">心理学百科</a></span>
                                    <span><a href="">病态心理学</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">政治军事</span>
                                    <span><a href="">党政读物</a></span>
                                    <span><a href="">中国之治</a></span>
                                    <span><a href="">世界政治</a></span>
                                    <span><a href="">军事理论</a></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="menuListTil">
                        <div class="menuSanjiao">
                            <p>少儿童书</p>
                        </div>
                        <div class="menuListDis">
                            <ul>
                                <li>
                                    <span class="classifyName">儿童文学</span>
                                    <span><a href="">中国儿童文学</a></span>
                                    <span><a href="">外国儿童文学</a></span>
                                    <span><a href="">寓言故事</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">动漫绘本</span>
                                    <span><a href="">儿童绘本</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">启蒙益智</span>
                                    <span><a href="">益智游戏</a></span>
                                    <span><a href="">艺术培养</a></span>
                                    <span><a href="">科普百科</a></span>
                                </li>
                                <li>
                                    <span class="classifyName">技能培养</span>
                                    <span><a href="">少儿技能</a></span>
                                    <span><a href="">书法绘画</a></span>

                                </li>
                            </ul>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
            <div class="carousel-indicators size">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
                    aria-label="Slide 4"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="./images/niceloop/syloop-13.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="./images/niceloop/syloop-14.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="./images/niceloop/syloop-15.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="./images/niceloop/syloop-16.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        <script src="./js/bootstrap.bundle.js"></script>


        <!-- 书分类 -->
        <!-- <div class="classify"> -->
        <!--文学艺术-->
        <!-- <div id="cbooks1">
                <p>小说</p>
                <strong class="xiaoshuo">
                </strong>
            </div>
            <div>
                <p>文学</p>
                <strong class="wenxue">
                </strong>
            </div>
            <div>
                <p>艺术</p>
                <strong class="yishu">
                </strong>
            </div>
            <div>
                <p>传记</p>
                <strong class="zhuanji">
                </strong>
            </div> -->
        <!-- 人文社科 -->
        <!-- <div>
                <p>历史</p>
                <strong class="lishi">
                </strong>
            </div>
            <div>
                <p>哲学宗教</p>
                <strong class="zhexue">
                </strong>
            </div>
            <div>
                <p>心理</p>
                <strong class="xinli">
                </strong>
            </div> -->
        <!-- 少儿童书 -->
        <!-- <div>
                <p>儿童文学</p>
                <strong class="ertong">
                </strong>
            </div>
            <div>
                <p>启蒙益智</p>
                <strong class="qimeng">
                </strong>
            </div> -->
        <!-- 教育考试 -->
        <!-- <div>
                <p>中小教辅</p>
                <strong class="zhongxiao">
                </strong>
            </div>
            <div>
                <p>外语学习</p>
                <strong class="waiyu">
                </strong>
            </div>
        </div> -->

        <!-- 左侧动画 -->
        <!-- <div class="donghua">
            <img src="images/lrback.jpg" alt="" class="beijing">
            <div class="nicelogowai"><img src="images/logo.png" alt="" class="nicelogo"></div>
            <div class="youshouwai"><img src="images/youshou.png" alt="" class="shou"></div>
            <p class="biaoyu">耐思书店</p>
            <p class="ywbiaoyu">NICE BookStore</p>
        </div> -->
        <div class="massPic">
            <div class="body-left">
                <div id="carouselExampleFade" class="carousel slide carousel-fade leftLoop" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="./images/hs1.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="./images/hs2.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="./images/hs3.png" class="d-block w-100" alt="...">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon leftLoopP" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next leftLoopN" type="button" data-bs-target="#carouselExampleFade"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
            <div class="body-right">
                <img class="br-pic1" src="images/lrback.jpg" alt="">
                <div>
                    <strong>耐思书店</strong>
                    <span>NICE BookStore</span>
                </div>
                <img class="br-pic2" src="images/logo.png" alt="">
                <img class="br-pic3" src="images/youshou.png" alt="">
            </div>
        </div>


        <!-- 精品推荐 -->
        <div class="jpRecommend">
            <p class="jpTitle">精品推荐</p>
            <div class="tuijian">
                <div class="tuijian_books">
                </div>
            </div>
        </div>
        <div class="jpRecommend">
            <p class="jpTitle">精品推荐</p>
            <div class="tuijian">
                <div class="tuijian_books">
                </div>
            </div>
        </div>
        <div class="jpRecommend">
            <p class="jpTitle">精品推荐</p>
            <div class="tuijian">
                <div class="tuijian_books">
                </div>
            </div>
        </div>
        <div class="toTop">
            <div class="bPic"><img src="./images/up.png" alt=""></div>
            <p>To the top</p>
        </div>
    </div>
    <!-- 底部 -->
    <div id="footer">
        <iframe src="footer.html" height="320px" width="100%" frameborder="0" scrolling="no"></iframe>
    </div>
    <!-- 侧边 -->
    <div class="slideR">
        <div><span>个人中心</span></div>
        <div><span>购物车</span></div>
        <div class="slideBottom">
            <div>
                <img src="./images/up.png" alt="">
                <p>To the top</p>
            </div>

        </div>
    </div>

</body>

</html>